<template>
	<view>
		<map id="myMap" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" enable-zoom
		enable-scroll @markertap="markertap" :enable-satellite="isSatellite"></map>
		<!-- 首页展示 -->
		<view class="flex-between map-title-view">
			<view class="map-title-item" style="background: url(../../static/image/12.png) no-repeat;background-size: 100% 100%;">
				<view class="fontSize-14 color-333 margin-bottom20">崩塌滑坡</view>
				<view class="flex-alignItems-center">
					<view class="color-000 fontWeight-bold" style="font-size: 23px;">185,44</view>
					<view class="margin-left10">
						<u-icon name="arrow-upward" v-if="true" color="#11AA66" size="13"></u-icon>
						<u-icon name="arrow-downward" v-else color="#EF3C34" size="13"></u-icon>
					</view>
				</view>
			</view>
			<view class="map-title-item1" style="background: url(../../static/image/11.png) no-repeat;background-size: 100% 100%;">
				<view class="fontSize-14 color-333 margin-bottom20">崩塌滑坡</view>
				<view class="flex-alignItems-center">
					<view class="color-000 fontWeight-bold" style="font-size: 23px;">185,44</view>
					<view class="margin-left10">
						<u-icon name="arrow-upward" v-if="true" color="#11AA66" size="13"></u-icon>
						<u-icon name="arrow-downward" v-else color="#EF3C34" size="13"></u-icon>
					</view>
				</view>
			</view>
			<view class="map-title-item2" style="background: url(../../static/image/10.png) no-repeat;background-size: 100% 100%;">
				<view class="fontSize-14 color-333 margin-bottom20">崩塌滑坡</view>
				<view class="flex-alignItems-center">
					<view class="color-000 fontWeight-bold" style="font-size: 23px;">185,44</view>
					<view class="margin-left10">
						<u-icon name="arrow-upward" v-if="true" color="#11AA66" size="13"></u-icon>
						<u-icon name="arrow-downward" v-else color="#EF3C34" size="13"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 地图弹窗 -->
		<image class="map-choose-image img-crisp-edges" @click="mapChooseShow = true"
			src="../../static/image/13.png" mode=""></image>
		<!-- 地图搜索 -->
		<image class="map-choose-image1 img-crisp-edges" @click="handleSearchPopup" src="../../static/image/14.png"
			mode=""></image>
		<!-- 地图定位 -->
		<image class="map-choose-image2 img-crisp-edges" src="../../static/image/15.png" mode=""></image>
		<!-- 类型弹窗 -->
		<view class="map-choose-image3View" @click="chooseTypeCoordinate">
			<image class="map-choose-image3 img-crisp-edges" v-if="IsCoordinate" src="../../static/image/16.png"
				mode=""></image>
			<image class="map-choose-image3 img-crisp-edges" v-else src="../../static/image/17.png" mode=""></image>
		</view>
		<view class="map-coordinate-view flex-justAliCenter-column" v-if="IsCoordinate">
			<view class="flex-center margin-bottom20" @click="riskShow = true">
				<view class=""></view>
				<view class="fontSize-13 color-808080">崩塌滑坡</view>
			</view>
			<view class="flex-center margin-bottom20">
				<view class=""></view>
				<view class="fontSize-13 color-808080">泥石流</view>
			</view>
			<view class="flex-center">
				<view class=""></view>
				<view class="fontSize-13 color-808080">沉陷水毁</view>
			</view>
		</view>
		
		<!-- 风险弹窗 -->
		<view class="risk-popup-view" v-if="IsCoordinate">
			<view class="flex-center" @click="CoordinateTitle">
				<view class="risk-popup-iconview"></view>
			</view>
			<view class="risk-popup-center">
				<view class="flex-between">
					<view class="fontSize-16 color-000">G1523 K330+745左侧G1523 K330+745左侧G1523 K330+745左侧</view>
					<view class="flex-alignItems-center margin-left20">
						<view class="class-icon-view flex-center">
							Ⅰ类
						</view>
						<view class="level-icon-view flex-center">
							四级
						</view>
					</view>
				</view>
				<view class="fontSize-15 color-4D4D4D margin-30-0">
					绍兴市柯桥区 甬台温复线温州瑞安至苍南
				</view>
				<view class="fontSize-15 color-4D4D4D">
					ZJ-TZ-SM-G1523-09
				</view>
			</view>
		</view>
		
		<!-- 风险弹窗详情 -->
		<view class="risk-popup-view1" v-if="riskShowInfo">
			<view class="flex-center f-divider1 padding-bottom30" style="position: relative;"
				@click="CoordinateTitle1">
				<view class="risk-popup-iconview"></view>
				<image class="message-info-view" @click.stop="messageShow" src="../../static/image/18.png" mode="">
				</image>
				<view class="message-info-imageView" v-if="ismessageShow">
					<view class="message-info-text">更多信息请前往web端进行查看</view>
					<view class="message-info-texticon"></view>
				</view>
			</view>
			<view class="risk-popup-center" style="position: relative;">
				<view class="fontSize-18 color-000">
					G1523 K330+745左侧
				</view>
				<scroll-view scroll-x="true" class="scroll-Y" show-scrollbar>
					<view class="flex-alignItems-center riskInfo-image-view">
						<image class="riskInfo-image" @click="$tools.previewImage('https://survey.chunchuangkeji.cn/images/11.jpg')"
							src="https://survey.chunchuangkeji.cn/images/11.jpg" mode=""></image>
						<image class="riskInfo-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode=""></image>
						<image class="riskInfo-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode=""></image>
					</view>
				</scroll-view>
				<!-- 列表 -->
				<view class="margin-top30">
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">项目区域:</view>
						<view class="fontSize-15 color-333">浙江省绍兴市柯桥区</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡类型:</view>
						<view class="fontSize-15 color-333">路堑边坡</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">工点编号:</view>
						<view class="fontSize-15 color-333">ZJ-TZ-SM-G1523-09</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">所属路线:</view>
						<view class="fontSize-15 color-333">国道G1523甬台温复线温州瑞安至苍南</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">中心里程:</view>
						<view class="fontSize-15 color-333">K330+745左侧</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">路程桩号:</view>
						<view class="fontSize-15 color-333">K350+750~K350+800</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">管理单位:</view>
						<view class="fontSize-15 color-333">柯桥区交通运输局</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">岩土结构:</view>
						<view class="fontSize-15 color-333">岩质</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡长度(m):
						</view>
						<view class="fontSize-15 color-333">40.00</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡高度(m):
						</view>
						<view class="fontSize-15 color-333">10.00</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡角度(°):
						</view>
						<view class="fontSize-15 color-333">66.00</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡倾向(°):
						</view>
						<view class="fontSize-15 color-333">200.00</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">风险类别:</view>
						<view class="fontSize-15 color-333">Ⅰ类</view>
					</view>
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">风险等级:</view>
						<view class="fontSize-15 color-333">四级</view>
					</view>
				</view>
				<image class="riskInfo-list-image" src="../../static/image/19.png" mode=""></image>
			</view>
		</view>
		
		<!-- 搜索弹窗 -->
		<view class="map-search-popup" v-if="isSearchPopup">
			<view class="flex-center f-divider1 padding-bottom30 margin-bottom30">
				<view class="risk-popup-iconview"></view>
			</view>
			<u-search placeholder="路线编号/名称、工点编号/名称" shape="square" v-model="keyword" :showAction="false"></u-search>
			<!-- 列表 -->
			<view class="map-search-list" v-if="false">
				<view class="map-search-item">
					<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
					<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
						|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
				</view>
				<view class="map-search-item">
					<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
					<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
						|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
				</view>
				<view class="map-search-item">
					<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
					<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
						|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
				</view>
				<view class="map-search-item">
					<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
					<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
						|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
				</view>
				<view class="map-search-item">
					<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
					<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
						|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
				</view>
			</view>
			<view class="map-search-list flex-justAliCenter-column">
				<image class="img-280" src="../../static/image/20.png" mode=""></image>
			</view>
		</view>
		
		<!-- 地图切换 -->
		<u-popup :show="mapChooseShow" :round="10" mode="right" :overlay="false" closeable @close="mapChooseClose">
			<view class="map-choose-popup">
				<view style="height: 100rpx;"></view>
				<view class="flex-justAliCenter-column margin-bottom30 map-item" v-for="(item,index) in mapTabList"
					:key="index" @click="handleMapChoose(index)"
					:class="mapChooseIndex == index?'map-choose-active':''">
					<image class="img-100 margin-bottom20" :src="item.image" mode="">
						<view class="fontSize-13 color-000">{{item.name}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				latitude: 39.904989,
				longitude: 116.405285,
				isSatellite:false, // 是否切换卫星地图
				IsCoordinate: false, // 类型弹窗
				riskShow: false, // 风险弹窗
				riskShowInfo: false, // 风险弹窗详情,
				ismessageShow: false, // 信息图标弹窗
				keyword: '', // 搜索框关键词
				isSearchPopup: false, // 搜索弹窗
				mapChooseShow: false, // 地图切换弹窗
				mapTabList: [{
						name: '标准地图',
						image: '../../static/image/21.png'
					},
					{
						name: '卫星地图',
						image: '../../static/image/21.png'
					}
				],
				mapChooseIndex: 0, //地图类型索引
			}
		},
		onLoad() {

		},
		onReady() {
			// 创建map对象
			this._mapContext = uni.createMapContext("myMap", this);
		},
		methods: {
			// 点击标记点
			markertap(value) {
				console.log(value, '点击标记点');
			},
			// 地图类型切换
			handleMapChoose(index) {
				if(index == 0){
					this.isSatellite = false
				}
				if(index == 1){
					this.isSatellite = true
				}
				this.mapChooseIndex = index
				this.mapChooseShow = false
			},
			// 地图选择关闭弹窗
			mapChooseClose() {
				this.mapChooseShow = false
			},
			// 展示搜索弹窗
			handleSearchPopup() {
				this.isSearchPopup = !this.isSearchPopup
			},
			// 展示图标信息弹窗
			messageShow() {
				this.ismessageShow = !this.ismessageShow
			},
			// 风险类型弹窗
			chooseTypeCoordinate() {
				this.IsCoordinate = !this.IsCoordinate
			},
			// 风险弹窗
			riskClose() {
				this.riskShow = false
			},
			// 风险弹窗展示
			CoordinateTitle() {
				this.riskShowInfo = true
				this.riskShow = false
			},
			// 风险弹窗详情展示弹窗
			CoordinateTitle1() {
				this.riskShow = true
				this.riskShowInfo = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.map-item {
		padding: 20rpx;
		border-radius: 10rpx;
	}
	
	.map-choose-active {
		background-color: #eeeeee !important;
	}
	
	.map-choose-popup {
		width: 160rpx;
		padding: 30rpx;
	}
	
	.map-search-item {
		padding: 30rpx 0;
		border-bottom: 1px solid #DBDBDB;
	}
	
	.map-search-list {
		height: 700rpx;
		overflow-y: auto;
	}
	
	.map-search-popup {
		width: 95%;
		padding: 30rpx 20rpx;
		height: 900rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
	}
	
	// 搜索
	.message-info-imageView {
		position: absolute;
		top: -106rpx;
		right: 0;
	}
	
	.message-info-texticon {
		position: absolute;
		right: 30rpx;
		width: 15rpx;
		height: 15rpx;
		background: rgba(0, 0, 0, 0.49);
		clip-path: polygon(100% 0, 0 0, 51% 100%);
	}
	
	.message-info-text {
		background: rgba(0, 0, 0, 0.49);
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 12px;
		color: #FFFFFF;
	}
	
	.riskInfo-list-image {
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
	}
	
	.riskInfo-image-view {
		width: 100%;
		margin-top: 30rpx;
	}
	
	.riskInfo-image {
		width: 280rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}
	
	.message-info-view {
		position: absolute;
		top: -15rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	// 风险弹窗详情展示弹窗
	
	.level-icon-view {
		width: 90rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #4B6DFD;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #4B6DFD;
	}
	
	.class-icon-view {
		width: 90rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		background: #4B6DFD;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #4B6DFD;
		margin-right: 20rpx;
	}
	
	.risk-popup-center {
		margin-top: 30rpx;
		// padding-bottom: 30rpx;
	}
	
	.risk-popup-iconview {
		width: 90rpx;
		height: 7rpx;
		background: #D5D5D5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	
	.risk-popup-view1 {
		width: 95%;
		padding: 30rpx 20rpx;
		height: 1150rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
	}
	
	.risk-popup-view {
		width: 95%;
		padding: 30rpx 20rpx;
		height: 300rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
	}
	
	// 风险弹窗
	
	.map-coordinate-view {
		position: absolute;
		bottom: 480rpx;
		right: 20rpx;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
		z-index: 100;
		border-radius: 20rpx;
	}
	
	.map-choose-image3View {
		position: absolute;
		bottom: 660rpx;
		right: 20rpx;
	}
	
	.map-choose-image3 {
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}
	
	.map-choose-image2 {
		position: absolute;
		bottom: 780rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}
	
	.map-choose-image1 {
		position: absolute;
		top: 380rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}
	
	.map-choose-image {
		position: absolute;
		top: 260rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}
	.map-title-view {
		position: absolute;
		top: 30rpx;
		left: 20rpx;
		z-index: 100;
		width: 95%;
	}
	
	.map-title-item {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}
	
	.map-title-item1 {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}
	
	.map-title-item2 {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}
	
</style>